<template>
	<view class="settings">
		<view class="user-info-box mb10 space-between">
			<view class="flex align-c">
				<image class="user-head-image mr15" :src="user_info.avatar" mode=""></image>
				<view class="">
					<view class="fz18 bold mb8">
						{{user_info.nickname}}
					</view>
					<view class="c6 fz12">
						ID：{{user_info.ownid}}
					</view>
				</view>
			</view>
			<image @click="jumpPath('/pages/subpackage/my/userInfo')" class="right-icon"
				src="../../../static/my/right_icon.png" mode=""></image>
		</view>

		<view class="mb10">
			<view class="settings-line space-between" @click="jumpPath('/pages/subpackage/my/accountsAndSecurity')">
				<view class="fz16">
					账户与安全中心
				</view>
				<image src="../../../static/my/right_icon.png" mode=""></image>
			</view>

			<view class="settings-line space-between" @click="jumpPath('/pages/subpackage/my/commonProblem')">
				<view class="fz16">
					常见问题
				</view>
				<image src="../../../static/my/right_icon.png" mode=""></image>
			</view>
			<view class="settings-line space-between" @click="jumpPath('/pages/subpackage/my/aboutUs')">
				<view class="fz16">
					关于汇福源
				</view>
				<image src="../../../static/my/right_icon.png" mode=""></image>
			</view>
			<view class="settings-line space-between">
				<view class="fz16">
					关闭推荐
				</view>
				<view class="">
					<u-switch v-model="checked" @change="change"></u-switch>
				</view>
			</view>
		</view>

		<view class="log-out-btn fz18 bold" @click="logOut">
			退出登录
		</view>
	</view>
</template>

<script>
	import {
		userLogout,
	} from '@/network/loginAndMy.js'
	import {
		getUserinfo,
	} from '@/network/loginAndMy.js'
	export default {
		data() {
			return {
				user_info: {},
				checked: false,
			}
		},
		mounted() {
			if(uni.getStorageSync("statusw")){
				this.checked= uni.getStorageSync("statusw")
			}
			this.getUserinfo()
		},
		methods: {
			// 获取用户信息
			getUserinfo() {
				getUserinfo().then(res => {
					if (res.code == 1) {
						this.user_info = res.data
					}
				})
			},
			// 跳转页面
			jumpPath(path) {
				uni.navigateTo({
					url: path
				});
			},
			change(status) {
				uni.setStorage({ key: "statusw", data: status });
			},
			// 退出登陆
			logOut() {
				userLogout().then(res => {
					if (res.code == 1) {
						uni.removeStorageSync('indexp')
						uni.$TUIKit.logout().then(imResponse => {
							uni.showToast({
								title: "退出成功",
								icon: "none",
								duration: 2000,
							});
						});
						uni.removeStorageSync('token');
						uni.removeStorageSync('token1');
						uni.removeStorageSync('phone');
						uni.navigateTo({
							url: '/pages/subpackage/landing_operation/logIn'
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.settings {
		height: 100vh;
		background-color: #F3F3F3;

		.user-info-box {
			background-color: #ffffff;
			padding: 50rpx 30rpx 40rpx;

			.user-head-image {
				width: 130rpx;
				height: 130rpx;
				border-radius: 50%;
			}

			.right-icon {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.settings-line {
			background-color: #ffffff;
			height: 110rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			position: relative;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.settings-line::after {
			content: "";
			width: calc(100vw - 30rpx);
			height: 2rpx;
			background-color: #F2F2F2;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}

		.settings-line:last-child::after {
			content: "";
			background-color: transparent;
		}

		.log-out-btn {
			height: 80rpx;
			width: 100%;
			text-align: center;
			line-height: 80rpx;
			background-color: #ffffff;
		}
	}
</style>